﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="prueba.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.Mapas.prueba" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <asp:ScriptManager ID="ScriptManager" runat="server">
        <Services>
            <asp:ServiceReference Path="LocationService.asmx" />
        </Services>
        <Scripts>
            <asp:ScriptReference Path="http://maps.google.com/maps/api/js?sensor=false" />
        </Scripts>
    </asp:ScriptManager>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   
       <script type="text/javascript">
           function Find() {
               var zip = $get("<%= txtZipCode.ClientID %>").value;
            LocationsSample.LocationService.FindLocations(zip, onSuccess, onFailed);
        }

        function onSuccess(results) {
            if (results.length > 0) {
                var table = "<table border=\"1\" cellspacing=\"0\" cellpadding=\"10\">";
                for (var i in results) {
                    table += "<tr>";
                    table += "<td>";
                    table += "<b>" + results[i].Name + "</b><br/>";
                    table += results[i].StreetAddress + "<br/>";
                    table += results[i].City + ", " + results[i].State + " " + results[i].Zip + "<br/>";
                    table += results[i].Phone;
                    table += "</td>";
                    table += "<td>" + results[i].Distance + "</td>";
                    table += "</tr>";
                }

                table += "</table>";
                $get("locationList").innerHTML = table;

                // show map
                createMap();

                // agregar direcciones al mapa en orden inverso
                for (var i = results.length - 1; i >= 0; i--) {
                    showAddress(results[i].StreetAddress + ", " + results[i].City + ", " + results[i].State + " " + results[i].Zip);
                }
            }
            else {
                $get("locationList").innerHTML = "<b>No locations found.</b>";
                $get("map_canvas").innerHTML = "";
            }
        }

        function onFailed(error) {
            $get("locationList").innerHTML = "<b>There was a problem communicating with the server.</b>";
            $get("map_canvas").innerHTML = "";
        }

        var geocoder;
        var map;

        function createMap() {
            var latlng = new google.maps.LatLng(34.03, -118.14); //area de Los Angeles
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            geocoder = new google.maps.Geocoder();
        }

        function showAddress(address) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    // direccion no encontrada
                }
            });

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <h2>
        Welcome to Oscar's Restaurants Family
    </h2>
    <p>
        Find a location near you.
    </p>
    <div>
        <span>Enter Zip Code: </span>
        <asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Find" OnClientClick="Find(); return false;" />
    </div>
 
    <div id="locationList" style="margin-top: 10px; float: left;"></div>
    <div id="map_canvas" style="margin: 10px; width:500px; height:400px; float: left;"></div>
    </div>
    </form>
</body>
</html>
